<template>
  <ul>
    <li v-for="(value, key) in message" :key="value">
      {{ `${key + ':' + value}` }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      message: {},
    }
  },
  props:['id','name','age'],
  methods: {
    getMessage() {
      setTimeout(() => {
        const id = this.$route.params.id
        this.message = {
          id,
          title: `title${id}`,
          content: `content${id}`,
        }
      }, 500)
    },
  },
  watch: {
    $route: {
      handler() {
        this.getMessage()
      },
      immediate: true,
    },
  },
}
</script>

<style></style>
